// 所有在js文件中书写的代码，都是全局作用域
// 所以为了避免项目中命名冲突，要变成局部作用域
// 方法：使用自调用函数  --  开启一个新的作用域，避免命名冲突
// (function(){})()

// 第一个对象：食物
(function() {
    var elements = [];
    // 第一步 利用构造函数创建食物对象
    function Food(options) {
        options = options || {};
        this.width = options.width || 20;
        this.height = options.height || 20;
        this.color = options.color || 'green';
        this.x = options.x || 0;
        this.y = options.y || 0;
    }
    //  第二步 随机生成食物，并将食物渲染在map上
    // 创建数组用于存储食物，方便蛇吃掉的时候删除食物

    Food.prototype.render = function(map) {
        // 当蛇吃掉的时候，先删除原来的食物，在创建新的食物
        remove(); //调用删除食物函数
        // 先动态创建食物div
        var div = document.createElement('div');
        map.appendChild(div);
        //创建好的食物存储到数组中
        elements.push(div);
        console.log(elements);

        // 设置食物div的样式
        div.style.width = this.width + 'px';
        div.style.height = this.height + 'px';
        div.style.backgroundColor = this.color;
        div.style.position = 'absolute';

        // 随机设置x和y的值
        this.x = Tools.getRandom(0, map.offsetWidth / this.width - 1) * this.width;
        this.y = Tools.getRandom(0, map.offsetHeight / this.height - 1) * this.height;

        div.style.left = this.x + 'px';
        div.style.top = this.y + 'px';
    }

    //  删除食物函数
    function remove() {
        // 因为数组删除第一个元素时，剩余元素的索引会重新排列
        // 所以从最后一个元素开始删除
        // bug :记得 i = elements.length - 1
        for (var i = elements.length - 1; i >= 0; i--) {
            // 第一件事：删除页面里动态添加的元素div
            elements[i].parentNode.removeChild(elements[i]);
            // 第二件事：删除数组里的食物元素splice(开始位置，删除个数)
            elements.splice(i, 1);
        }
    }
    //  自调用函数使所有变量和函数都变成了局部的，外部将无法访问Food构造函数
    // 解决方法：window属性，都可以访问
    window.Food = Food;
})()

// 测试
// var map = document.getElementById('map');
// var food = new Food();

// food.render(map);